<template>
	<view>
		<view class="btn-wrapper">
			<view class="sure" v-if="showStock">该商品已抢完</view>
			<view class="sure add-cart" @click="$emit('cart', true)" v-else-if="showCart">添加购物车</view>
			<view class="sure" @click="$emit('buy', true)" v-else-if="showBuy">立即购买</view>
		</view>
	</view>
</template>
<script>
	/**
	 * SkuButton sku操作按钮
	 * @description 该组件一般用于商城购物选择物品数量的场景。
	 * @tutorial https://www.uviewui.com/components/numberBox.html
	 * @property {outFoStock} 是否缺货，和库存关联
	 * @property {mode} 按钮显示模式，1:都显示 2:只显示购物车 3:只显示立即购买 4:显示缺货按钮
	 * @event {Function} cart 添加购物车
	 * @event {Function} buy 立即购买
	 * @example <sku-button :mode="3" :outFoStock="false"></sku-button>
	 */
	export default {
		name: 'skuButton',
		//
		props: {
			outFoStock: {
				Type: Boolean,
				default: false
			},
			mode: {
				Type: Number,
				default: 1
			}
		},
		//
		data() {
			return {};
		},
		//
		computed: {
			showStock() {
				if (this.outFoStock || this.mode === 4) {
					return true;
				}
				return false;
			},
			showCart() {
				if (this.mode === 1 || this.mode === 2) {
					return true;
				}
				return false;
			},
			showBuy() {
				if (this.mode === 1 || this.mode === 3) {
					return true;
				}
				return false;
			}
		},
		//
		methods: {
			//
			cart() {
				this.$emit('cart', true);
			},
			//
			buy() {
				this.$emit('buy', true);
			}
		}
	};
</script>

<style lang="scss" scoped>
	.btn-wrapper {
		display: flex;
		width: 100%;
		height: 120rpx;
		flex: 0 0 120rpx;
		align-items: center;
		justify-content: space-between;
		padding: 0 26rpx;
		box-sizing: border-box;

		.sure {
			margin: 0 auto;
			width: 95%;
			max-width: 1200rpx;
			height: 80rpx;
			border-radius: 38rpx;
			color: #fff;
			line-height: 80rpx;
			text-align: center;
			font-weight: 500;
			font-size: 28rpx;
			background: linear-gradient(118.17deg, #FEA370 0%, #FE2406 95.01%);
		}

		.sure.add-cart {
			background: linear-gradient(118.17deg, #FEA370 0%, #FE2406 95.01%);
		}
	}
</style>